<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>canvas绘制矩形</title>
	</head>
	<body>
		<canvas id="canv" width="500" height="500" style="border:solid 2px red;">
			当前浏览器不支持canvas
		</canvas>		
		<script>
			var oC=document.getElementById("canv");
			var ctx=oC.getContext("2d");
			//设置线条宽度
			ctx.lineWidth=7;
			//设置线条颜色为红色
			ctx.strokeStyle="red";
			//设置矩形填充色为蓝色
			ctx.fillStyle="blue";
			//设置阴影颜色为紫色
			ctx.shadowColor="darkorchid";
			//设置阴影的模糊级别为20，值越大阴影越模糊
			ctx.shadowBlur=20;
			//设置阴影偏右10px，-10表示偏左10px
			ctx.shadowOffsetX=10;
			//设置阴影偏下20px，-20表示偏上20px
			ctx.shadowOffsetY=20;	
			ctx.rect(100,100,200,100);
			ctx.stroke();
			//填充当前绘图，如果没有此方法则无法填充。
			ctx.fill();
		</script>	
	</body>
</html>
